<template>
  <div class="mapTool">
    <div v-for=" (i, index) in mapTool.content" :key="i.key" class="content" :class="{'left-content':i.key=='select'}">
      <div
        class="title"
        :class="{titleActive: showRow[i.key]}"
        @click="contentClickHandler($event,i.key)"
        @mouseenter="mouseenterHandler(i.key)"
        @mouseleave="mouseleaveHandler(i.key)"
      >
        <img v-if="showRow[i.key] || hoverRow[i.key]" class="pic" :src="i.iconSwitch">
        <img v-else class="pic" :src="i.icon">
        <span class="labelText">
          {{ i.title }}
        </span>
        <div v-if="index==mapTool.content.length-2" class="contentBorder" />
      </div>
      <div v-show="i.row.length>0 && showRow[i.key]" class="rows">
        <div v-for="item in i.row" :key="item.key">
          <slot :name="item.key">默认</slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import VueTypes from 'vue-types'
  // import { css } from 'styled-vue'
  export default {
    name: 'MapTool',
    props: {
      mapTool: VueTypes.shape({
        theme: VueTypes.string.def('origin'),
        content: VueTypes.arrayOf(
          VueTypes.shape({
            title: VueTypes.string.isRequired,
            key: VueTypes.string.isRequired,
            showRow: VueTypes.bool,
            icon: VueTypes.string,
            iconSwitch: VueTypes.string,
            row: VueTypes.arrayOf(
              VueTypes.shape({
                key: VueTypes.string,
                render: VueTypes.string,
                show: VueTypes.bool,
                layer: VueTypes.any,
                zIndex: VueTypes.integer
              })
            )
          })
        )
      })
    },
    //    style: css`
    //     .title:hover img{
    //       src:
    //     }
    // `,
    data() {
      return {
        showRow: {},
        hoverRow: {}
      }
    },
    created() {
      this.initRowStatus()
    },
    mounted() {
      console.log(this.mapTools)
    },
    methods: {
      contentClickHandler(e, value) {
        this.showRow[value] = !this.showRow[value]
        this.$emit('getKey', value, this.showRow[value])
      },
      mouseenterHandler(value) {
        this.hoverRow[value] = true
      },
      mouseleaveHandler(value) {
        this.hoverRow[value] = false
      },
      // 初始化row状态
      initRowStatus() {
        const obj = {}
        const objHover = {}
        this.mapTool.content.forEach((element) => {
          const key = element.key
          const show = element.showRow
          obj[key] = show
          objHover[key] = false
        })
        this.showRow = obj
        this.hoverRow = objHover
      }
    }
  }
</script>

<style scoped>
  .mapTool {
    height: 2.3em;
    position: absolute;
    top: 1.1rem;
    /* background-color: #ffffff; */
    z-index: 1;
    right: 20px;
    /* border-radius: 4px; */
/*    -webkit-box-shadow: 0 0 10px hsl(0deg 0% 40% / 25%);
    box-shadow: 0 0 10px hsl(0deg 0% 40% / 25%); */
    z-index: 999;
  }

  .content {
    display: inline-block;
    width: 7em;
    position: relative;
    cursor: pointer;
    font: 14px Helvetica Neue, Helvetica, PingFang SC, \5fae\8f6f\96c5\9ed1, Tahoma, Arial, sans-serif;
    line-height: 2.3em;
    background-color: #FFFFFF;
  }

  .left-content{
    margin-right: 20px;
  }

  .contentBorder {
    width: 1px;
    height: 18px;
    vertical-align: middle;
    /* margin-left: 10px; */
    /* margin-right: 5px; */
    border-left: 1px solid #999999;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 9px;
  }

  .title {
    vertical-align: middle;
    text-align: center;
    /* padding-left: 1.2rem */
  }

  .labelText {
    margin: 0 2px;
  }

  .title:hover {
    color: #6060fb;
  }

  .titleActive {
    color: #6060fb;
  }

  .pic {
    width: 1em;
    height: 1em;
    vertical-align: middle;
  }

  .spanText {
    vertical-align: middle;
    padding-left: 10em;
  }

  .rows {
    background-color: #ffffff;
    position: absolute;
    top: 2.7em;
    padding: 0.8em 0em;
    border-radius: 3px;
    cursor: default;
    width: 7em;
    box-shadow: 0px 2px 9.5px 0.5px rgba(165, 165, 165, 0.3);
  }

  @media screen and (max-width: 414px) {
    .mapTool {
      top: 6rem;
      right: 2rem;
    }
  }
</style>
